<template>
  <div class="personal">
    <!-- 导航栏 -->
    <van-nav-bar title="个人信息" class="page-nav-bar">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
    </van-nav-bar>
    <div class="vanCell">
      <input type="file" hidden ref="file" @change="onChangeImg">
      <van-cell title="头像" is-link @click="$refs.file.click()">
      <van-image
        class="user-img"
        fit="cover"
        round
        :src="user.photo"
      />
    </van-cell>
    <van-cell title="昵称" is-link :value="user.name" @click="isShowUser=true"/>
    <van-cell title="性别" is-link :value="user.gender===0? '男':'女'" @click="isShowGender=true"/>
    <van-cell title="生日" is-link :value="user.birthday || '1977-00-00'" @click="isShowBirthday=true"/>
    </div>
    <!-- 修改昵称弹出层 -->
    <van-popup v-model="isShowUser" position="bottom" :style="{ height: '100%' }">
      <nick-name @close="isShowUser = false" v-model="user.name" @input="updataUser" v-if="isShowUser"/>
    </van-popup>
    <!-- 修改性别弹出层 -->
    <van-popup v-model="isShowGender" position="bottom" :style="{ height: '40%' }">
      <gender @close="isShowGender = false" v-model="user.gender" @input="updataGender" v-if="isShowGender"/>
    </van-popup>
    <!-- 修改生日弹出层 -->
    <van-popup v-model="isShowBirthday" position="bottom" :style="{ height: '40%' }">
      <birthday @close="isShowBirthday = false" v-model="user.birthday" @input="updatabirthday" v-if="isShowBirthday"/>
    </van-popup>
    <!-- 修改头像弹出层 -->
    <van-popup v-model="isShowPortrait" position="bottom" :style="{ height: '100%' }">
      <portrait :img="img" @close="isShowPortrait=false" @updata-img="updataImg" v-if="isShowPortrait" />
    </van-popup>
  </div>
</template>

<script>
import { getUserinfo } from '@/api/user'
import nickName from './components/nickname'
import gender from './components/gender'
import birthday from './components/birthday'
import portrait from './components/portrait'
export default {
  name: '',
  components: {
    nickName,
    gender,
    birthday,
    portrait
  },
  props: {},
  data() {
    return {
      user: {},
      isShowUser: false, // 修改昵称弹出层的显示状态
      isShowGender: false,
      isShowBirthday: false,
      isShowPortrait: false,
      img: null
    }
  },
  computed: {},
  watch: {},
  created() {
    this.loadUserinfo()
  },
  mounted() {},
  methods: {
    async loadUserinfo() {
      try {
        const { data } = await getUserinfo()
        this.user = data.data
      } catch (err) {
        this.$toast.fail('获取个人信息失败')
      }
    },
    updataUser(res) {
      this.user.name = res
      this.isShowUser = false
    },
    updataGender(res) {
      this.user.gender = res
      this.isShowGender = false
    },
    updatabirthday(res) {
      this.user.birthday = res
      this.isShowBirthday = false
    },
    // 上传图片
    onChangeImg() {
      // 获取文件对象
      const file = this.$refs.file.files[0]
      this.img = window.URL.createObjectURL(file)
      this.isShowPortrait = true
      // 选中同一个文件时不会触发change事件
      this.$refs.file.value = ''
    },
    updataImg(res) {
      this.user.photo = res
      this.isShowPortrait = false
    }
  }
}
</script>

<style scoped lang="less">
.personal {
  .user-img {
    width: 60px;
    height: 60px;
  }
  .van-popup {
    background: #f5f7f9;
  }
}
</style>
